<template>
    <div class="train-page">
        <div class="type-box">
          <div class="data">
            <span class="name1">考试状态:</span>
            <span class="item" v-for="(item,index) in typeLIst1" :class="{active:index==current}" @click="getbaomingFlag(item.num,index)">{{item.name}}</span>
          </div>
<!--          <div class="data">
            <span class="name1">类 型:</span>
            <span class="item" v-for="(item,index) in typeLIst2" :class="{active:index==current1}" @click="getclassify(item.id,index)">{{item.name}}</span>
          </div> -->
        </div>
        <div class="main-box" v-show="show">
            <!-- <h3 class="top-title">所有培训计划</h3> -->
            <div class="all-train">
                  <div class="exam-item" v-for="(item,index) in paperList">
                      <span class="name" :title="item.educationKaoshi.name">{{item.educationKaoshi.name}}</span>
                      <div style="display: flex;align-items: center;">

                        <div class="new-left">
                          <img src="@/assets/image/exam-item.png" alt="">
                          <div class="staandname" v-show="item.educationKaoshi.kaoshiStu=='1'">
                            <span class="status">正在考试</span>
                          </div>

                          <div class="staandname" v-show="item.educationKaoshi.kaoshiStu=='2'">
                            <span class="status">考试结束</span>
                          </div>

                          <div class="staandname" v-show="item.educationKaoshi.kaoshiStu=='3'">
                            <span class="status">考试未开始</span>
                          </div>
                        </div>


                        <div class="item">
                          <div class="exam-info">



                            <div class="exam-time">考试开始时间:&nbsp;&nbsp;{{item.educationKaoshi.startTime}}</div>
                            <div class="exam-time">考试结束时间:&nbsp;&nbsp;{{item.educationKaoshi.endTime}}</div>
                            <div class="person-num" v-if="stu=='1'">
                              参与人数: {{item.educationKaoshi.userKaoshiCount}} 人
                            </div>
                            <div class="person-num" v-if="stu=='2'">
                              完成人数: {{item.educationKaoshi.userKaoshiCount}} 人
                            </div>

                            <div class="person-num" v-if="stu=='3'">
                              参与人数: {{item.educationKaoshi.userKaoshiCount}} 人
                            </div>
                          </div>

                          <div class="is-sign-up1 gonggong" v-show="item.educationKaoshi.kaoshiStu=='1' && item.jiaojuanFlag=='0' && !item.kaoshiStartTime " @click="goContent('shijuan',item)">
                            <span class="signup">开始考试</span>
                          </div>

                          <div class="is-sign-up1 gonggong" v-show="item.educationKaoshi.kaoshiStu=='1' && item.jiaojuanFlag=='0' && item.kaoshiStartTime" @click="goContent('shijuan',item)">
                            <span class="signup">继续考试</span>
                          </div>

                          <!-- //goPage(item.kaoshiId) -->
                          <div class="is-sign-up2 gonggong" v-show="item.educationKaoshi.kaoshiStu=='2' && item.kaoshiStartTime &&item.yuejuanFlag!=0" @click="getChengji(item)">
                            <span class="chenggong">查看成绩</span>
                          </div>
                          <!-- 考试结束，但还未阅卷时候，按钮为灰色 -->
                          <div class="is-sign-up3 gonggong" v-show="item.educationKaoshi.kaoshiStu=='2' && item.kaoshiStartTime && item.yuejuanFlag==0">
                            <span class="chenggong">查看成绩</span>
                          </div>
                          
                          <!-- 考生考完不能再次进入考试，变为查看成绩按钮 -->
                          <div class="is-sign-up3 gonggong" v-show="item.educationKaoshi.kaoshiStu=='1' && item.jiaojuanFlag=='1' && item.kaoshiStartTime">
                            <span class="chenggong">查看成绩</span>
                          </div>

                          <div class="is-sign-up3 gonggong" v-show="item.educationKaoshi.kaoshiStu=='2' && !item.kaoshiStartTime">
                            <span class="chenggong">未参加考试</span>
                          </div>

                            <div class="is-sign-up3 gonggong" v-show="item.educationKaoshi.kaoshiStu=='3'" >
                              <span class="yibaoming">开始考试</span>
                            </div>

                        </div>
                      </div>
                      <div style="clear:both"></div>
                  </div>

                <nodata v-show="paperList.length==0 && start"></nodata>
            </div>
            <ui-pagination class="study-pagination" v-show="paperList.length!=0" :total="total" @pageChange="pageChange" :size="pageSize"></ui-pagination>
        </div>

<!--        <div class="main-box" v-show="!show">
            <div class="type-main">
                <div class="type-item" :class="'type'+index" v-for="(item,index) in list">
                    <div class="big-title" :class="'big'+index"><span>{{item.title}}</span></div>
                    <div class="er-box">
                        <div class="er-item" v-for="(item1,index1) in item.list">
                            <div class="left" :class="'left'+'-'+index+'-'+index1">
                                {{item1.title}}
                            </div>
                            <div class="right" :class="'right'+'-'+index+'-'+index1">
                                <span class="text-item" v-for="(item2,index2) in item1.list" :style="'background:'+item1.color">{{item2.title}}</span>
                                <div class="clear"></div>
                            </div>
                            <div class="clear"></div>

                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div> -->
        <el-dialog title="人脸验证" :visible.sync="dialogTableVisible" class="face-dialog"  :close-on-press-escape="false" :close-on-click-modal="false" >
          <div class="img-box">
            <video id="video" width="600px" height="600px" autoplay="autoplay" v-show="!imgShow"></video>
            <canvas id="canvas" width="600px" height="600px"></canvas>
            <img id="imgTag" :src="imgUrl" alt="imgTag" class="imgTag" v-show="imgShow">
            <div class="button-box">
              <el-button type="primary" @click="takePhoto">{{uptext}}</el-button>
              <el-button type="primary" @click="upload" v-show="!uploadFlag">上传</el-button>
              <el-button type="primary" v-show="uploadFlag">照片验证中...</el-button>
              <!-- <el-button type="danger" @click="remove">删除照片</el-button> -->
            </div>
          </div>

        </el-dialog>

    </div>

</template>

<script>
  import {
    Notification
  } from 'element-ui';
import 'babel-polyfill'
import Pagination from '@/components/pagination.vue'
import Cookies from 'js-cookie'
import nodata from '@/components/nodata.vue'
import $ from "jquery"
import Child from './shijuan.vue'
let mediaStreamTrack=null; // 视频对象(全局)
let video ;
export default {

    components: {
        'ui-pagination':Pagination,
        nodata,
        Child
    },
    data(){
        return{
            start:false,
            yanzheng:false,
            isYanzheng:false,
            uptext:'拍照',
            uploadFlag:false,
            imgUrl:'',
            imgShow:false,
            dialogTableVisible:false,
            total:null,
            kaoshiTimeFlag:1,
            typeLIst1:[
                // {name:'全部',addClass:'active',num: null,},
                {name:'正在考试',addClass:'active',num: 1,},
                {name:'考试结束',addClass:'',num: 2,},
                {name:'考试未开始',addClass:'',num: 0,},
            ],
            // typeLIst2:[
            //     {name:'全部',addClass:'active'},
            //     {name:'必须',addClass:''},
            //     {name:'选修',addClass:''},
            // ],
            current:0,
            current1:0,
            typeLIst2:[],
            show:true,
            stu:1,
            pageNo:1,
            pageSize:8,
            paperList:[],
            classify:null,
            // time1:null,
            // time2:null,
        }
    },
    created(){
      this.gettreeName();
      this.getData();
    },
    mounted(){

    },
    beforeDestroy(){

    },

    methods:{
      chechCom(loading1){
            let that = this;
            //检测电脑设备是否已经安装了摄像头
        if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
          // Firefox 38+ seems having support of enumerateDevicesx
          navigator.enumerateDevices = function(callback) {
            navigator.mediaDevices.enumerateDevices().then(callback);
          };
        }
        var MediaDevices = [];
        var isHTTPs = location.protocol === 'https:';
        var canEnumerate = false;

        if (typeof MediaStreamTrack !== 'undefined' && 'getSources' in MediaStreamTrack) {
          canEnumerate = true;
        } else if (navigator.mediaDevices && !!navigator.mediaDevices.enumerateDevices) {
          canEnumerate = true;
        }

        var hasMicrophone = false;
        var hasSpeakers = false;
        var hasWebcam = false;

        var isMicrophoneAlreadyCaptured = false;
        var isWebcamAlreadyCaptured = false;

        function checkDeviceSupport(callback) {
          if (!canEnumerate) {
            return;
          }

          if (!navigator.enumerateDevices && window.MediaStreamTrack && window.MediaStreamTrack.getSources) {
            navigator.enumerateDevices = window.MediaStreamTrack.getSources.bind(window.MediaStreamTrack);
          }

          if (!navigator.enumerateDevices && navigator.enumerateDevices) {
            navigator.enumerateDevices = navigator.enumerateDevices.bind(navigator);
          }

          if (!navigator.enumerateDevices) {
            if (callback) {
              callback();
            }
            return;
          }

          MediaDevices = [];
          navigator.enumerateDevices(function(devices) {
            devices.forEach(function(_device) {
              var device = {};
              for (var d in _device) {
                device[d] = _device[d];
              }

              if (device.kind === 'audio') {
                device.kind = 'audioinput';
              }

              if (device.kind === 'video') {
                device.kind = 'videoinput';
              }

              var skip;
              MediaDevices.forEach(function(d) {
                if (d.id === device.id && d.kind === device.kind) {
                  skip = true;
                }
              });

              if (skip) {
                return;
              }

              if (!device.deviceId) {
                device.deviceId = device.id;
              }

              if (!device.id) {
                device.id = device.deviceId;
              }

              if (!device.label) {
                device.label = 'Please invoke getUserMedia once.';
                if (!isHTTPs) {
                  device.label = 'HTTPs is required to get label of this ' + device.kind + ' device.';
                }
              } else {
                if (device.kind === 'videoinput' && !isWebcamAlreadyCaptured) {
                  isWebcamAlreadyCaptured = true;
                }

                if (device.kind === 'audioinput' && !isMicrophoneAlreadyCaptured) {
                  isMicrophoneAlreadyCaptured = true;
                }
              }

              if (device.kind === 'audioinput') {
                hasMicrophone = true;
              }

              if (device.kind === 'audiooutput') {
                hasSpeakers = true;
              }

              if (device.kind === 'videoinput') {
                console.log('有的')
                hasWebcam = true;
              }

              // there is no 'videoouput' in the spec.

              MediaDevices.push(device);
            });

            if (callback) {
              callback();
            }
          });
        }
        //end
      let status = null;
          checkDeviceSupport(function() {
          if(!hasWebcam){
              console.log("没有摄像头！");
              loading1.close()
              Notification.warning({
                    title:'提示',
                    message:"学习本堂课程需要人脸验证，您的电脑没有摄像头"
                  })
              status = false;
              return false;
            }else{
              that.dialogTableVisible = true;

                loading1.close()
                Notification.warning({
                    title:'提示',
                    message:"学习前，请先验证人脸"
                  })

                setTimeout(()=>{
                  that.openMedia()
                },100)
              if(!isWebcamAlreadyCaptured){
                // console.log("捕获摄像头失败，请重新安装摄像头！");
                // Notification.warning({
                //     title:'提示',
                //     message:"捕获摄像头失败，请重新安装摄像头！"
                //   })
                status = false;
                return false;
              }
              else{
                // console.log(3333)

                // that.dialogTableVisible = true;
                // Notification.warning({
                //     title:'提示',
                //     message:"学习前，请先验证人脸"
                //   })

                // setTimeout(()=>{
                //   that.openMedia()
                // },100)



              }
            }
            if(!hasMicrophone){
              console.log("没有麦克风！");
              //return false;
            }else{
              if(!isMicrophoneAlreadyCaptured){
                console.log("捕获麦克风失败，请重新安装麦克风！");
                //return false;
              }
            }




          });

          // if(hasWebcam && isWebcamAlreadyCaptured){
          //   return  true;
          // }
          // else{
          //   return  false;
          // }
          },
          openMedia() {
              let that = this;
              let constraints = {
                  video: { width: 600, height: 600 },
                  audio: false
              };
              //获得video摄像头
               video = document.getElementById('video');
               console.log(187878)
              let promise = navigator.mediaDevices.getUserMedia(constraints);
              promise.then((mediaStream) => {
                console.log(mediaStream,9090)
                 // mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1];
                 mediaStreamTrack=mediaStream.getVideoTracks()
                  video.srcObject = mediaStream;
                  video.play();
              })
              .catch((error)=>{
                console.log(error)
                this.$message({
                  message: '请允许拍照',
                  type: 'warning'
                });

                //Cookies.remove('__guid');
                //Cookies.remove('monitor_count');
                //that.openMedia();
              })
          },
          remove(){
            this.imgUrl = "";
            var cxt=document.getElementById("canvas").getContext("2d");
            cxt.clearRect(0,0,600,600);
            this.uptext = "再拍一次";
            this.imgShow = false;
          },

      takePhoto() {

             if(this.imgShow){
               this.remove()
             }
             else{
               this.uptext = "清空照片";
               //获得Canvas对象
               let video = document.getElementById('video');
               let canvas = document.getElementById('canvas');
               let ctx = canvas.getContext('2d');
               ctx.drawImage(video, 0, 0, 600, 600);



               // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
               let img = document.getElementById('canvas').toDataURL();
               // 这里的img就是得到的图片
               console.log('img-----', img);
               this.imgUrl = img;
               this.imgShow = true;

               //base64转file文件
               function dataURLtoFile(dataurl, filename) {
                 var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                 bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                 while(n--){
                 u8arr[n] = bstr.charCodeAt(n);
                 }
                 return new File([u8arr], filename, {type:mime});
               }
               let name = new Date().getTime()+".jpg"
               let file = dataURLtoFile(img,name);
               this.file = file;
               console.log(file,888)
             }

             //document.getElementById('imgTag').src=img;//上传
      // 　　　　　　$.ajax({         　　　　　　　　url:"/xxxx.do"          　　　　　　　　,type:"POST"          　　　　　　　　,data:{"imgData":img}         　　　　　　　　,success:function(data){            　　　　　　　　console.log(data);            　　　　　　　　document.gauges.forEach(function(gauge) {             　　　　　　　　gauge.value =data.data            　　　　　　});         　　　　　　}         　　　　　　,error:function(){            　　　　　　　　console.log("服务端异常！");          　　　　　　}        　　　　　　});

         },
         upload(){

           if(!this.imgShow){
             Notification.warning({
               title:'提示',
               message:"请先拍照"
             })
             return;
           }
           let that = this;
           that.uploadFlag = true;
           var formdata = new FormData();
           formdata.append('file', this.file);
           // formdata.append('courseId', this.$route.params.id);
           this.$axios({
                url: '/cloud/compareFace',
                method: 'post',
                data: formdata,
                headers: { 'Content-Type': 'multipart/form-data' },
             }).then((response) => {
               console.log(response,1889);
               that.uploadFlag = false;
               Notification.success({
                   title:'提示',
                   message:"验证通过，请点击按钮开始考试"
                 })
                 that.dialogTableVisible = false;
                 // that.getData();
                 that.isYanzheng = true;

             })
             .catch((e)=>{
               that.uploadFlag = false;
             })
         },

        goPage(kaoshiId){
          this.$router.push("/result/"+kaoshiId);
        },
        goContent(url,item){
          let that = this;
          if(window.localStorage.getItem("yemian")=='1'){
            let routeData = this.$router.resolve({
                name: url,
                query:{kaoshiId:item.kaoshiId,id:item.id,examName:item.educationKaoshi.name},
            });
            window.open(routeData.href, '_blank');
          }else{
            Notification.warning({
              title: '提示',
              message: '你已打开考试页面，请勿重复打开。'
            })
          }
        },
        getChengji(item){
          this.$router.push({path:"/result",query:{id:item.id}});
        },
        pageChange(index){
            this.pageNo = index;
            this.getData();
        },
        getData(){
          let that = this;
          this.loading = true;
          this.$axios.$post("/f/pageUserKaoshi?pageNo="+this.pageNo+"&pageSize="+this.pageSize+"&kaoshiTimeFlag="+this.kaoshiTimeFlag+"&classify="+this.classify+"&educationKaoshi.kaoshiType=1")
          .then(function (response) {
            console.log(response,9090)
                that.start = true;
                let list = response.data;
                that.total = response.count;
                console.log(list)
                // if(list.length!=0){
                //     let starttime;
                //     let endtime;
                //     let nowtime = new Date().getTime();
                //     let start,end;
                //     list.forEach((item,i)=>{
                //       console.log(item.educationKaoshi.startTime)
                //       console.log(item.educationKaoshi.endTime)
                //       start= item.educationKaoshi.startTime;
                //       start = start.replace(/-/g,'/'); // 将-替换成/，因为下面这个构造函数只支持/分隔的日期字符串
                //       starttime = new Date(start).getTime()

                //       end = item.educationKaoshi.endTime;
                //       end = end.replace(/-/g,'/');
                //       endtime = new Date(end).getTime()

                //       if(starttime<nowtime && nowtime<endtime){
                //         //正在考试
                //         item.educationKaoshi.kaoshiStu = '1'
                //       }
                //       if(endtime<nowtime ){
                //         //考试结束
                //         item.educationKaoshi.kaoshiStu = '2'
                //       }
                //       if(starttime>nowtime){
                //         //考试未开始
                //          item.educationKaoshi.kaoshiStu = '3'
                //       }
                //     })
                // }
                console.log('hha ')
                console.log(list)
                that.paperList = list;
                that.loading = false;
          })
          .catch(function (error) {
              // handle error
              console.log(error);
          })
        },

      getbaomingFlag(num,index){
        this.current=index;
        if(this.kaoshiTimeFlag!=num){
          this.kaoshiTimeFlag = num;
          this.getData();
        }
      },
      //考试类型赋值
      getclassify(id,index){
        this.current1=index;
        if(this.classify != id){
          this.classify = id;
          this.getData();
        }

      },
        //得到考试的类型
        gettreeName(){
          let that = this;
          this.$axios.$post("/f/listPaperClassify")
          .then(function (response) {
                let list = response.data;
                if(list.length!=0){
                    list.forEach((item,i)=>{
                      if(item.treeName =='a'){
                        item.name = "必修"
                      }
                      if(item.treeName == 'b'){
                        item.name = "选修"
                      }
                    })
                    list.unshift({'id':'','treeName':'','name':'全部','addClass':'active'})
                    that.typeLIst2 = list;
                }
          })
          .catch(function (error) {
              // handle error
              console.log(error);
          })
        },
    }
}
</script>

<style lang="less" scoped="scoped">
    .train-page{
        width:100%;
        height:100%;
        box-sizing:border-box;
        padding:25px;
        overflow:hidden;
        overflow-y:auto;
        .type-main{
            width:100%;
            box-sizing:border-box;
            padding:0px;
            border:1px solid #eaeaea;
            .type-item{
                width:100%;
                .big-title{
                    width:10rem;
                    height:100%;
                    position:relative;
                    float:left;
                    box-sizing:border-box;
                    border-right:1px solid #eaeaea;
                    border-bottom:1px solid #eaeaea;
                    span{
                        position:absolute;
                        font-size:16px;
                        width:100%;
                        text-align:center;
                        display:block;
                        left:0;
                        top:50%;
                        transform:translateY(-50%);
                        color:#555555;
                    }
                }
                .er-box{
                    width:calc(100% - 10rem);
                    float:left;
                    box-sizing:border-box;

                    .er-item{
                        width:100%;
                        position:relative;
                        box-sizing:border-box;


                        .left{
                            width:15rem;
                            float:left;
                            text-align:center;
                            font-size:16px;
                            color:#555555;
                            border-right:1px solid #eaeaea;
                            border-bottom:1px solid #eaeaea;
                            box-sizing:border-box;
                        }
                        .right{
                            width:calc(100% - 15rem);
                            float:left;
                            padding-top:1rem;
                            .text-item{
                                padding:0 1.5rem;
                                height:2rem;
                                float:left;
                                margin-bottom:1rem;
                                line-height:2rem;
                                color:#fff;
                                font-size:14px;
                                border-radius:1rem;
                                margin-left:1rem;
                                display:block;
                            }
                        }


                    }
                    .er-item:nth-child(2n){
                        .left{

                        }
                        .right{

                        }
                    }
                }
            }
            .type-item:last-child{
                .big-title{
                    border-bottom:0;
                }
                .er-box{
                    .er-item:last-child{
                        .left{
                            border-bottom:0;
                        }

                    }
                }
            }
        }
        .type-box{
            width:100%;
            .data{
                width:100%;
                height:30px;
                margin-bottom:10px;
                .name1{
                    float:left;
                    display:block;
                    width:70px;
                    text-align:right;
                    font-size:14px;
                    height:30px;
                    line-height:30px;
                    color:#555555;
                }
                .item{
                    margin-left:10px;
                    height:30px;
                    line-height:30px;
                    padding:0 10px;
                    font-size:14px;
                    color:#666666;
                    float:left;
                    cursor:pointer;
                }
                .active{
                    background:#0068b7;
                    border-radius:3px;
                    color:#fff;
                }
            }
        }
        .content-box{
            padding-top:0px !important;
        }
        .all-train{
            width:100%;
            margin:0 auto;
            margin-bottom:60px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
              .exam-item{
                // cursor: pointer;
                width: 45%;
                // max-width: 600px;
                // height: 119px;
                // background-color: rgba(242, 240, 240, 100);
                border: 1px solid rgba(255, 255, 255, 100);
                margin: 20px 0;
                padding: 10px 20px;
                display: flex;
                flex-direction: column;
                box-shadow: 2px 2px 10px #409eff;
                background: url('../../assets/image/new-exam.png') right bottom no-repeat ;
                margin-left: calc(10%/4);
                margin-right: calc(10%/4);
                background-color: #ffffff;
                .new-left{
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  img{
                    width: 60px;
                    height: 60px;
                  }
                  .staandname{
                    .status{
                      border-radius: 2px;
                      text-align: center;
                      display: inline-block;
                      width:60px;
                      height: 20px;
                      line-height: 20px;
                      background-color:rgba(242, 45, 45, 100) ;
                      color:#ffffff;
                      font-size: 13px;
                      font-family: PingFangSC-regular;
                    }
                  }
                }
                .name{
                  height: 30px;
                  line-height: 30px;
                  display: inline-block;
                  overflow:hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  // color: rgba(16, 16, 16, 100);
                  font-size: 16px;
                  text-align: center;
                  font-family: PingFangSC-regular;
                  color:#0076ca;
                  font-weight: bold;
                }
                .item{
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  width: 100%;
                  .exam-info{
                    margin-left: 11px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    height: 80px;
                    .exam-time{
                      // width: 186px;
                      // height: 20px;
                      color: rgba(57, 158, 228, 100);
                      font-size: 14px;
                      text-align: left;
                      font-family: PingFangSC-regular;
                      margin-top: 4px;
                    }
                    .person-num{
                      margin-top: 5px;
                      width: 126px;
                      height: 20px;
                      color: rgba(157, 155, 155, 100);
                      font-size: 14px;
                      text-align: left;
                      font-family: PingFangSC-regular;
                    }

                  }

                  .gonggong{
                    margin-top: 0 !important;
                    width: 100px !important;
                    font-weight: bold;
                  }
                  .is-sign-up1{
                    cursor: pointer;
                    margin-top:24px;
                    width: 134px;
                    height: 30px;
                    border-radius: 4px;
                    background-color: #0076CA;
                    text-align: center;
                    border: 1px solid rgba(187, 187, 187, 100);
                    .signup{
                      line-height: 30px;
                       width: 56px;
                       height: 20px;
                       color: rgba(253, 253, 255, 100);
                       font-size: 14px;
                       text-align: left;
                       font-family: PingFangSC-regular;
                    }
                  }
                  .is-sign-up2{
                    cursor: pointer;
                    margin-top:24px;
                    width: 134px;
                    height: 30px;
                    border-radius: 4px;
                    background-color: #0076CA;
                    text-align: center;
                    border: 1px solid rgba(187, 187, 187, 100);
                    .chenggong{
                      line-height: 30px;
                       width: 56px;
                       height: 20px;
                       color: rgba(253, 253, 255, 100);
                       font-size: 14px;
                       text-align: left;
                       font-family: PingFangSC-regular;
                    }
                  }
                    .is-sign-up3{
                      // cursor: pointer;
                      margin-top:24px;
                      width: 134px;
                      height: 30px;
                      border-radius: 4px;
                      background-color: rgba(157, 155, 155, 100);
                      text-align: center;
                      border: 1px solid rgba(187, 187, 187, 100);
                      .chenggong{
                        line-height: 30px;
                         width: 56px;
                         height: 20px;
                         color: rgba(253, 253, 255, 100);
                         font-size: 14px;
                         text-align: left;
                         font-family: PingFangSC-regular;
                      }
                      .yibaoming{
                        line-height: 30px;
                         width: 56px;
                         height: 20px;
                         color: rgba(253, 253, 255, 100);
                         font-size: 14px;
                         text-align: left;
                         font-family: PingFangSC-regular;
                      }
                    }

                }

              }
              .exam-item:hover{
                box-shadow: 3px 3px 12px #0076ca;
              }

        }

        .face-dialog{
          .el-dialog{
            margin-top:0 !important;
            transform:translateY(-50%);
            top:50%;
            width:600px;
            .el-dialog__header{
              background:#1783dd;
              .el-dialog__title{
                color:#fff;
              }
              .el-dialog__close{
                color:#fff;
              }
            }
            .el-dialog__body{
              padding:0;
            }
            .button-box{
              margin:20px auto;
              display: table;
              position:absolute;
              right:20px;
              bottom:0px;
              z-index:10;
            }
            .img-box{
              width:600px;
              height:600px;
              margin:0 auto;
              display:block;
              background:#444444;
              position:relative;
              #canvas{
                position:absolute;
                left:0%;
                top:0;
                z-index:9;
                width:100%;
                height:100%;
              }
              .imgTag{
                width:100%;
                height:100%;
                display:block;
              }
            }
          }
        }
    }


</style>
